<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .logo {
            position: fixed;
            top: 20px;
            left: 50%;
            z-index: 1000;
            width: 360px;
            margin-left:-165px;
            display:flex;
            align-items: center;
        }
        .logo img{
            width: 70px;
            height: 70px;
            margin-right:10px;
        }
        .logo .title{
            text-align: center;
        }
        .logo .title h4{
            font-size:28px;
            color:#333;
            margin:0;
            font-weight:400;
        }
        .logo .title h5{
            font-size:18px;
            color:#999;
            margin:0;
            font-weight:400;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<%--<div class="logo">
    <img src="http://ziyue-xn.oss-cn-beijing.aliyuncs.com/common/kongzi_huangse.png" >
    <div class="title">
        <h4>学员生源地分布情况</h4>
        <h5>数据来自 子曰语文</h5>
    </div>
</div>--%>
<div id="container" style="height: 100%">

</div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=079c9277acf0b36bf293b52cf34a0e1c"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="../../js/map/echarts-amap.min.js"></script>
<script type="text/javascript" src="../../js/map/custom_map_config.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {

        tooltip: {
            trigger: 'item'
        },
        amap: {
            mapStyle: 'amap://styles/d4558a3e687feed4e624bf9a100987bc',
            center: [106.114129, 35.550339],
            resizeEnable: true,
            zoom: 6
        }/*,水印
        graphic: [
            {
                type: 'group',
                rotation: Math.PI / 4,
                bounding: 'raw',
                right: 110,
                bottom: 110,
                z: 100,
                children: [
                    {
                        type: 'rect',
                        left: 'center',
                        top: 'center',
                        z: 100,
                        shape: {
                            width: 400,
                            height: 50
                        },
                        style: {
                            fill: 'rgba(0,0,0,0.3)'
                        }
                    }/!*,
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        z: 100,
                        style: {
                            fill: '#fff',
                            text: '子曰语文',
                            font: 'bold 26px Microsoft YaHei'
                        }
                    }*!/
                ]
            }]*/
    };
    //设置echart高德地图
    myChart.setOption(option);
    //高德地图的一些渲染
    var cityData = ${cityData};
    cityData = eval(cityData);
    var map = myChart.getModel().getComponent('amap').getAMap();
    AMap.plugin('AMap.ToolBar', function () {//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });

    var style = [{
        url: 'http://ziyue-xn.oss-cn-beijing.aliyuncs.com/common/yuandian.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
    }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
        anchor: new AMap.Pixel(4, 4),
        size: new AMap.Size(7, 7)
    }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
        anchor: new AMap.Pixel(3, 3),
        size: new AMap.Size(5, 5)
    }
    ];
    var mass = new AMap.MassMarks(cityData, {
        opacity: 0.8,
        zIndex: 111,
        cursor: 'pointer',
        style: style
    });
    var marker = new AMap.Marker({content: ' ', map: map});
    mass.on('mouseover', function (e) {
        marker.setPosition(e.data.lnglat);
        marker.setLabel({content: e.data.name})
    });
    mass.setMap(map);

</script>
</body>
</html>